<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>选择国家和地区代码</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/title.css" />
	    <style>
	    	.mui-input-clear.mui-indexed-list-search-input:focus {
			     border-bottom: 1px solid #4cd964; 
			     display: block; 
			}
			.mui-indexed-list-search{
				  display: block; 
				  border-bottom: 1px solid #c8c7cc; 
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				    color: #4cd964;
			}
			.mui-badge{
				border-radius: 4px;
				color:#999;
			}
			.mui-table-view-cell._letter{
				color:#999;
			}
			.friend-searchbox{
				padding:3px 0px;
			}
			.friend-search input{
				height:28px;
			}
			.friend-search .mui-bar .mui-icon{
				font-size:20px;
			}
			.friend-search span{
				line-height:28px;
			}
			
			
	    </style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav home_top" style="background-color: #3a3f43;">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" style="text-indent: 0;color: #ccc;"></a>
			<a class="mui-icon mui-icon-search mui-pull-right" style="text-indent: 0;color: #ccc;" id="search_code"></a>
			    <h1 id="title" class="mui-title" style="left: 62px;"><span lang>选择国家和地区代码</span></h1>  
				<div class="friend-searchbox mui-title" id="search_parm" style="width: 78%;left: 15%;background: #3a3f43;display:none;">
						<div class="friend-search">
							<label><span class="mui-icon mui-icon-search" style="color:#fff;background:none;"></span></label>
							<input type="text" id="searchInput" class="mui-input-clear" style="background-color: #3a3f43;color:#fff;width:78%;border:none;border-bottom:solid 1px #fff;" onkeyup="do_choose(this)">
							<label><span class="mui-icon mui-icon-closeempty" id="closeempty" style="float:right;padding-right: 5px;font-size:24px;margin-top: 5px;color:#fff;background:none;display:none;"></span></label>
							<div style="clear:both"></div>
						</div>
					</div>
				
			
		</header>
		
		
				
		<!--中部-->
		<div class="mui-content" style="padding-top: 64px;">
			<div id="list" class="mui-indexed-list" style="height: 614px;">

				<div class="mui-indexed-list-bar" style="height: 579px;">
					<a style="height: 17.95px; line-height: 17.95px;">↑</a>
					<a style="height: 17.95px; line-height: 17.95px;"><span class="mui-icon mui-icon-star" style="font-size:12px;"></span></a>
					<a style="height: 17.95px; line-height: 17.95px;">A</a>
					<a style="height: 17.95px; line-height: 17.95px;">B</a>
					<a style="height: 17.95px; line-height: 17.95px;">C</a>
					<a style="height: 17.95px; line-height: 17.95px;">D</a>
					<a style="height: 17.95px; line-height: 17.95px;">E</a>
					<a style="height: 17.95px; line-height: 17.95px;">F</a>
					<a style="height: 17.95px; line-height: 17.95px;">G</a>
					<a style="height: 17.95px; line-height: 17.95px;">H</a>
					<a style="height: 17.95px; line-height: 17.95px;">I</a>
					<a style="height: 17.95px; line-height: 17.95px;">J</a>
					<a style="height: 17.95px; line-height: 17.95px;">K</a>
					<a style="height: 17.95px; line-height: 17.95px;">L</a>
					<a style="height: 17.95px; line-height: 17.95px;">M</a>
					<a style="height: 17.95px; line-height: 17.95px;">N</a>
					<a style="height: 17.95px; line-height: 17.95px;">O</a>
					<a style="height: 17.95px; line-height: 17.95px;">P</a>
					<a style="height: 17.95px; line-height: 17.95px;">Q</a>
					<a style="height: 17.95px; line-height: 17.95px;">R</a>
					<a style="height: 17.95px; line-height: 17.95px;">S</a>
					<a style="height: 17.95px; line-height: 17.95px;">T</a>
					<a style="height: 17.95px; line-height: 17.95px;">U</a>
					<a style="height: 17.95px; line-height: 17.95px;">V</a>
					<a style="height: 17.95px; line-height: 17.95px;">W</a>
					<a style="height: 17.95px; line-height: 17.95px;">X</a>
					<a style="height: 17.95px; line-height: 17.95px;">Y</a>
					<a style="height: 17.95px; line-height: 17.95px;">Z</a>
					<a style="height: 17.95px; line-height: 17.95px;">#</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner" style="height: 579px;">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="doooo">
						<!--
						<li data-group="A" class="mui-table-view-cell _letter" onclick="do_data()">A</li>
						<li data-value="AKU" data-tags="AKeSu" data-name="阿尔巴尼亚" data-code="355" class="mui-table-view-cell mui-indexed-list-item">
							阿尔巴尼亚
							<span class="mui-badge" style="margin-right:8%;">355</span>
						</li>
						<li data-value="AKU" data-tags="AKeSu" data-name="阿尔及利亚" data-code="213" class="mui-table-view-cell mui-indexed-list-item">
							阿尔及利亚
							<span class="mui-badge" style="margin-right:8%;">213</span>
						</li>
						<li data-value="AKU" data-tags="AKeSu" data-name="阿富汗" data-code="93" class="mui-table-view-cell mui-indexed-list-item">
							阿富汗
							<span class="mui-badge" style="margin-right:8%;">93</span>
						</li>
						<li data-value="AKU" data-tags="AKeSu" data-name="阿根廷" data-code="54" class="mui-table-view-cell mui-indexed-list-item">
							阿根廷
							<span class="mui-badge" style="margin-right:8%;">54</span>
						</li>
						
						<li data-group="J" class="mui-table-view-cell _letter">J</li>
						<li data-value="MKU" data-tags="MKeSu" data-name="柬埔寨" data-code="855" class="mui-table-view-cell mui-indexed-list-item">
							柬埔寨
							<span class="mui-badge" style="margin-right:8%;">855</span>
						</li>
						<li data-group="M" class="mui-table-view-cell _letter">M</li>
						<li data-value="MKU" data-tags="MKeSu" data-name="美国" data-code="1" class="mui-table-view-cell mui-indexed-list-item">
							美国
							<span class="mui-badge" style="margin-right:8%;">1</span>
						</li>
						<li data-value="MKU" data-tags="MKeSu" data-name="蒙古" data-code="976" class="mui-table-view-cell mui-indexed-list-item">
							蒙古
							<span class="mui-badge" style="margin-right:8%;">976</span>
						</li>
						
						<li data-group="T" class="mui-table-view-cell _letter">T</li>
						<li data-value="TKU" data-tags="TKeSu" data-name="台湾 (中国)" data-code="886" class="mui-table-view-cell mui-indexed-list-item">
							台湾 (中国)
							<span class="mui-badge" style="margin-right:8%;">886</span>
						</li>
						<li data-value="TG" data-tags="TG" data-name="泰国" data-code="66" class="mui-table-view-cell mui-indexed-list-item">
							泰国
							<span class="mui-badge" style="margin-right:8%;">66</span>
						</li>
						
						<li data-group="X" class="mui-table-view-cell _letter">X</li>
						<li data-value="XKU" data-tags="XKeSu" data-name="香港 (中国)" data-code="852" class="mui-table-view-cell mui-indexed-list-item">
							香港 (中国)
							<span class="mui-badge" style="margin-right:8%;">852</span>
						</li>
						<li data-value="XKU" data-tags="XKeSu" data-name="新加坡" data-code="65" class="mui-table-view-cell mui-indexed-list-item">
							新加坡
							<span class="mui-badge" style="margin-right:8%;">65</span>
						</li>
						
						<li data-group="Z" class="mui-table-view-cell _letter">Z</li>
						<li data-value="ZKU" data-tags="ZKeSu" data-name="中国" data-code="86" class="mui-table-view-cell mui-indexed-list-item">
							中国
							<span class="mui-badge" style="margin-right:8%;">86</span>
						</li>
						-->
						
						</ul>
				</div>
			</div>
		</div>
		
		
		<script src="js/mui.js"></script>
		<script src="js/config.js"></script>
		<script src="js/arttmpl.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/localforage.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/common.js"></script>
        <script type="application/javascript">

		mui.init({});
		var userinfo = app.getState() || {};
		mui.plusReady(function(){
			mui.ajax({
				url: apiurl + "Login/area_code_list/",
				data:{'_token':userinfo.token},
				async: true,
				dataType: 'json',
				crossDomain: true, //强制使用5+跨域
				type: 'get',
				timeout: 10000,
				success: function(res) {
					console.log(JSON.stringify(res));
					// 请求成功
					get_data(res.data);

				},
				error: function(xhr, type, errorThrown) {
					//console.log(JSON.stringify(xhr));
					//console.log(JSON.stringify(type));
					//console.log(JSON.stringify(errorThrown));
					mui.toast('获取数据失败！');
				}
			});


			function get_data(data) {
				for(z in data){
					var p=data[z];
					var htm='';
					htm+='<li data-group="'+z+'" class="mui-table-view-cell _letter">'+z+'</li>';
					for(i in p){
						htm+='<li data-value="'+z+'KU" data-tags="'+p[i]['tags']+'" data-name="'+p[i]['name']+'" data-code="'+p[i]['area_code']+'" class="mui-table-view-cell mui-indexed-list-item">';
					    htm+=p[i]['name'];
					    htm+='<span class="mui-badge" style="margin-right:8%;">'+p[i]['area_code']+'</span>';
					    htm+='</li>';
					}
					$('#doooo').append(htm);
				}
			}
			
		})
		

        mui('.mui-table-view').on('tap', '.mui-table-view-cell.mui-indexed-list-item', function() {
               var name=this.getAttribute('data-name');
               var code=this.getAttribute('data-code');
               //获得列表界面的webview
			   var reg = plus.webview.getWebviewById('regist.html');
			   //触发列表界面的自定义事件（update_code）,从而进行数据刷新
			   mui.fire(reg,'update_code',{'name': name,'code':code});
               mui.back();
           
		});


        	document.getElementById('search_code').addEventListener('tap', function() {
        		document.getElementById('title').style.display='none';
        		document.getElementById('search_code').style.display='none';
        		document.getElementById('search_parm').style.display='block';
        		document.getElementById('searchInput').value='';
        	});
        	

        	document.getElementById('closeempty').addEventListener('tap', function() {
        		$('#doooo li').show();
        		document.getElementById('searchInput').value='';
        	});
        	
        	function do_choose(obj){
        		var vl=$(obj).val().trim();
        	    var test_num=/^[0-9]*$/;
        	    var test_str=/^[A-Za-z]+$/;
        	    var test_zh=/^[\u4e00-\u9fa5]$/;
        	    $('#doooo li').hide();
        	    if(vl==''){
        	    	$('#doooo li').show();
        	    	$('.mui-icon.mui-icon-closeempty').hide();
        	    	return;
        	    }
        	    $('.mui-icon.mui-icon-closeempty').show();
        	    
        	    $('#doooo li.mui-table-view-cell.mui-indexed-list-item').each(function(){
        	    	if(test_num.test(vl)){
        	    		var sn=$(this).attr('data-code');
        	    		var gr=$(this).attr('data-value').substr(0,1);
        	    		if(sn && sn.indexOf(vl)>=0){
        	    			$('#doooo li[data-group="'+gr+'"]').show();
        	    			$(this).show();
        	    		}
        	    	}
        	    	
        	    	if(test_str.test(vl)){
        	    		var sn=$(this).attr('data-tags').toUpperCase();
        	    		var gr=$(this).attr('data-value').substr(0,1);
        	    		vl=vl.toUpperCase();
        	    		if(sn && sn.indexOf(vl)>=0){
        	    			$('#doooo li[data-group="'+gr+'"]').show();
        	    			$(this).show();
        	    		}
        	    	}
        	    	
        	    	if(test_zh.test(vl)){
        	    		var sn=$(this).attr('data-name');
        	    		var gr=$(this).attr('data-value').substr(0,1);
        	    		if(sn && sn.indexOf(vl)>=0){
        	    			$('#doooo li[data-group="'+gr+'"]').show();
        	    			$(this).show();
        	    		}
        	    	}
        	    	
        	    });
        		
        	}
        	
        	 mui('.mui-bar.mui-bar-nav').on('tap', ' .mui-icon-left-nav.mui-pull-left', function() {
               if(document.getElementById('title').style.display=='none'){
               	 document.getElementById('title').style.display='block';
        		 document.getElementById('search_code').style.display='block';
        		 document.getElementById('search_parm').style.display='none';
               }
               else{
               	     mui.back();
               }
           
		    });
        </script>
	</body>

</html>